<template>
  <div>
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">阅卷</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">考试试卷</a></el-breadcrumb-item>
      </el-breadcrumb>

      <div class="grid">
        <div class="item basic-info">
          <div class="title"><i class="el-icon-s-order"></i>基本信息</div>
          <div class="text">名称：{{ exam.name }}</div>
          <div class="text">科目：{{ exam.subject }}</div>
          <div class="text">状态：{{ exam.status }}</div>
          <div class="text">开始时间：{{ exam.startTime }}</div>
          <div class="text">结束时间：{{ exam.endTime }}</div>
          <div class="text">查看试卷：
            <el-link type="primary" @click="goToPaperDetail(exam.id, paper.id)" style="margin-right: 20px">试卷预览</el-link>
          </div>
        </div>
        <div class="item paper">
          <div class="title"><i class="el-icon-tickets"></i>考试情况</div>
          <div class="text">参加考试人数：{{totalHeadcount}}</div>
          <div class="text">平均答卷时间：{{avgTime}}</div>
        </div>
        <div class="item student">
          <div class="title">
            <i class="el-icon-document-checked"></i>
            批阅
          </div>
          <div>
            <div style="margin-top: 30px; width: 100%; text-align: center">
              <div>
                <el-table
                  :data="answerPapersWithScore"
                  :span-method="objectSpanMethod"
                  style="width: 90%; margin-left: 5%">
                  <el-table-column
                    prop="studentId"
                    label="学号"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="objectivePoint"
                    label="客观题分数"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="subjectivePoint"
                    label="主观题分数"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="totalPoint"
                    label="总分"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="status"
                    label="状态"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="updateTime"
                    label="上次批阅时间"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    label="客观题">
                    <template slot-scope="scope">
                      <el-link type="primary" @click="checkAll" v-if="exam.status === '已结束'">批阅客观题</el-link>
                      <el-link type="primary" disabled v-if="exam.status !== '已结束'">批阅客观题</el-link>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="主观题">
                    <template slot-scope="scope">
                      <el-link type="primary" @click="checkShort(scope.row.id)" v-if="scope.row.status === '批阅中'">批阅主观题</el-link>
                      <el-link type="primary" disabled v-if="scope.row.status !== '批阅中'">批阅主观题</el-link>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="发布">
                    <template slot-scope="scope">
                      <el-link type="primary" @click="releaseScore" v-if="scope.row.status === '未发布'">发布成绩</el-link>
                      <el-link type="primary" disabled v-if="scope.row.status !== '未发布'">发布成绩</el-link>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div style="text-align: center; padding:10px">
              <el-pagination
                layout="total, prev, pager, next"
                :page-size="pagination.page_size"
                :current-page="pagination.index"
                :total="pagination.total"
                @current-change="changePage">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  computeObjectiveQuestion,
  getStudent,
  getPaper,
  getQuestionList,
  getAnswerPaperOfExam,
  releaseScore, getAnswerPaperOfExamInfo
} from '../../../api/exam'
import {getExamHeadcountAndTime} from '../../../api/teacherAnalysis'
export default {
  name: 'ExamMark',
  data () {
    return {
      // 分页信息
      pagination: {
        page_size: 5,
        index: 1,
        total: 100
      },
      // 统计信息
      totalHeadcount: 3,
      avgTime: '00:03:30',
      // 步骤条
      active: 1,
      // 学生信息
      students: [],
      answerPapersWithScore: [
        {
          createTime: '2022-04-04 12:54:27',
          id: 10,
          objectivePoint: 0.0,
          paperId: 12,
          status: '已发布',
          studentId: 4,
          subjectivePoint: 0.0,
          submitTime: '2022-04-03 19:39:56',
          totalPoint: 0.0,
          updateTime: '2022-04-04 12:54:27'
        }
      ],
      answerPapers: [],
      // 获取到的试卷信息
      paper: {
        createTime: '2022-04-04 12:45:56',
        examId: 12,
        id: 12,
        questionOrderJSONStr: '[[33],[37],[32],[36,38]]',
        scoreItemsJSONStr: '{"firstGroup":{"questionType":"radio","score":20,"total":1},"secondGroup":{"questionType":"multiple","score":20,"total":1},"thirdGroup":{"questionType":"filling","score":20,"total":1},"forthGroup":{"questionType":"shortAnswer","score":20,"total":2}}',
        updateTime: '2022-04-04 12:45:56'
      },
      // 考试信息
      exam: {
        createTime: '2022-03-26 14:41:56',
        endTime: '2022-04-26 00:00:00',
        id: 1,
        name: '计算机网络2022期末考试',
        startTime: '2022-04-25 22:00:00',
        status: '未开始',
        subjectId: 1,
        teacherId: 1234567890,
        updateTime: '2022-03-26 14:41:56'
      },
      // 全部题目
      questionList: [],
      // 主观题
      shortAnswerList: [
        {
          id: 1,
          stem: '1.渐近线是什么？',
          answer: '曲线上一点M沿曲线无限远离原点或无限接近间断点时，如果M到一条直线的距离无限趋近于零，那么这条直线称为这条曲线的渐近线。'
        },
        {
          id: 2,
          stem: '2.渐近线是什么？',
          answer: '曲线上一点M沿曲线无限远离原点或无限接近间断点时，如果M到一条直线的距离无限趋近于零，那么这条直线称为这条曲线的渐近线。'
        },
        {
          id: 3,
          stem: '3.渐近线是什么？',
          answer: '曲线上一点M沿曲线无限远离原点或无限接近间断点时，如果M到一条直线的距离无限趋近于零，那么这条直线称为这条曲线的渐近线。'
        }
      ]
    }
  },
  mounted () {
    this.exam = JSON.parse(this.$route.query.exam)
    this.getPaper(this.exam.id)
    this.getStudent()
    this.getAnswerPaperOfExam()
    this.getAnswerPaperOfExamInfo()
  },
  methods: {
    // 获取试卷题目
    getQuestionList () {
      let info = {
        index: 0,
        pageSize: 10,
        paperId: this.paper.id
      }
      console.log(info)
      getQuestionList(info).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          this.questionList = res.data.data.list
          this.shortAnswerList = []
          this.questionList.forEach(question => {
            if (question.questionType === 'shortAnswer') {
              let temp = {
                id: question.id,
                stem: JSON.parse(question.questionStem).stem,
                answer: question.answer
              }
              this.shortAnswerList.push(temp)
            }
          })
          console.log(this.shortAnswerList)
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取试卷
    getPaper (examId) {
      getPaper(examId).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          this.paper = res.data.data.list[0]
          this.paper.questionOrder = JSON.parse(this.paper.questionOrderJSONStr)
          this.paper.scoreIntems = JSON.parse(this.paper.scoreItemsJSONStr)
          this.getQuestionList()
          this.getExamHeadcountAndTime()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取统计信息
    getExamHeadcountAndTime () {
      getExamHeadcountAndTime(this.paper.id).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          this.totalHeadcount = res.data.data.totalHeadcount
          this.avgTime = res.data.data.avgTime
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 跳转试卷预览
    goToPaperDetail (examId, paperId) {
      console.log(paperId)
      this.$router.push({path: '/exam/paper', query: {examId: examId, paperId: paperId}})
    },
    // 跳转答题卡详情
    checkShort (answerPaperId) {
      this.$router.push({path: '/mark/answerPaperDetail',
        query: {id: answerPaperId,
          score: this.paper.scoreIntems.forthGroup.score.toString(),
          questionIds: this.paper.questionOrder[3]
        }})
    },
    // 获取参加学生
    getStudent () {
      let info = {
        examId: this.exam.id,
        pageSize: 10,
        index: 0
      }
      getStudent(info).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          this.students = res.data.data.list
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取答题卡id列表
    getAnswerPaperOfExam () {
      getAnswerPaperOfExam(this.exam.id).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          this.answerPapers = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取答题卡列表
    getAnswerPaperOfExamInfo () {
      let info = {
        page_size: this.pagination.page_size,
        index: this.pagination.index - 1,
        examId: this.exam.id
      }
      getAnswerPaperOfExamInfo(info).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          this.answerPapersWithScore = res.data.data.list
          this.pagination.total = res.data.data.total
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 批阅客观题
    checkAll () {
      let info = {
        examId: this.exam.id,
        isOver: false,
        questionType: 'radio',
        singleScore: this.paper.scoreIntems.firstGroup.score,
        answerPaperList: this.answerPapers
      }
      computeObjectiveQuestion(info).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          this.$message.success('批阅单选题成功')
          info.questionType = 'multiple'
          info.singleScore = this.paper.scoreIntems.secondGroup.score
          computeObjectiveQuestion(info).then(res => {
            console.log(res)
            if (res.data.errorCode === 0) {
              this.$message.success('批阅多选题成功')
              info.questionType = 'filling'
              info.singleScore = this.paper.scoreIntems.thirdGroup.score
              info.isOver = true
              computeObjectiveQuestion(info).then(res => {
                console.log(res)
                if (res.data.errorCode === 0) {
                  this.$message.success('批阅填空题成功')
                  this.getAnswerPaperOfExamInfo()
                } else {
                  this.$message.error(res.data.message)
                }
              })
            } else {
              this.$message.error(res.data.message)
            }
          })
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    next () {
      if (this.active++ > 2) this.active = 0
      this.pagination.index = 1
      this.getAnswerPaperOfExamInfo()
    },
    // 客观题表格合并
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 6 || columnIndex === 8) {
        if (rowIndex === 0) {
          return {
            rowspan: 5,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    // 发布成绩
    releaseScore () {
      let info = {
        examId: this.exam.id,
        teacherNumber: sessionStorage.getItem('teacherNumber')
      }
      releaseScore(info).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          this.$message.success('发布成功！')
          this.getAnswerPaperOfExamInfo()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 翻页
    changePage (val) {
      this.pagination.index = val
      this.getAnswerPaperOfExamInfo()
    }
  }
}
</script>

<style scoped>
  .breadcrumb {
    padding: 20px;
  }

  .grid{
    margin: 20px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-auto-flow: row dense;
  }

  .item {
    text-align: left;
    border: 1px solid #e5e4e9;
  }

  .title {
    margin-top: 20px;
    margin-left: 20px;
    font-size: 20px;
    font-weight: bolder;
  }

  .text {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    font-size: 15px;
  }

  .basic-info {
    height: auto;
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .paper {
    height: auto;
    grid-column-start: 2;
    grid-column-end: 3;
  }

  .student {
    height: auto;
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .short-answer-question {
    display: grid;
    grid-template-columns: 50% 50%;
  }
</style>
